import React,{useState,useEffect} from 'react'
//数据合成对话框
//2022-4-4

import DialogSimple from './DialogSimple' ;
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
import Table from 'react-bootstrap/Table';
import Form from 'react-bootstrap/Form' ;
import DatePicker from "react-datepicker";
import { registerLocale, setDefaultLocale } from  "react-datepicker";
import zhcn from 'date-fns/locale/zh-Cn';
import moment from 'moment';
import 'moment/locale/zh-cn' ;

registerLocale('zh-Cn', zhcn);


// lyrParams={compositeDialogLyrParams}
// appCurrentROI={currentRoiObject}
// onOk={compositeDialogOnOk}
// onCancel={compositeDialogOnCancel}
// isOpen={compositeDialogIsOpen}
// onSelectROIClick={compositeDialogOnSelectROI}
// selectedROI={compositeDialogSelectedROI}
function DialogSimpleComposite(props) {

    const [validMin, setValidMin] = useState(1) ;
    const [validMax, setValidMax] = useState(100) ;
    const [fillData, setFillData] = useState(0) ;
    const [roiObject, setRoiObject] = useState(null) ;
    const [startDt, setStartDt] = useState('') ;
    const [stopDt, setStopDt] = useState('') ;
    const [compositeMethod, setCompositeMethod] = useState(1) ;

    const optionsCompositeMethod = [
        { key: 1, text: '最小合成', value: 1 },
        { key: 2, text: '最大合成', value: 2 },
        { key: 3, text: '平均合成', value: 3 },
        { key: 4, text: '累加合成', value: 4 }
      ];


      



    //初始化
    useEffect(() => {
        setValidMin(1) ;
        setValidMax(100);
        setFillData(0) ;
        setRoiObject(null) ;
        setStartDt('') ;
        setStopDt('') ;
        if( typeof  props.lyrParams !== 'undefined'
        && props.lyrParams!==null
        && props.lyrParams.bandList !== 'undefined' 
        && props.lyrParams.bandList!=null 
        && props.lyrParams.bandList.length>0 ){
            setValidMin( props.lyrParams.bandList[0].validMin ) ;
            setValidMax( props.lyrParams.bandList[0].validMax ) ;
            setFillData( props.lyrParams.bandList[0].noData ) ;
        }
        else{
            setValidMin( 0 ) ;
            setValidMax( 0 ) ;
            setFillData( 0 ) ;
        }

    }, [props.lyrParams]);
    

    //打开对话框更新 选中的ROI
    useEffect(() => {
        if( props.isOpen===true && props.selectedROI !== null ){
            setRoiObject(props.selectedROI) ;
        }
    }, [props.isOpen]);


    const onCancel = function() {
        props.onCancel() ;
    }

    const onOk = function () {
        if( props.lyrParams===null || props.lyrParams.name==='' ){
            console.log('empty dsname');
            return ;
        }
        if( startDt===null || startDt === "" ){
            console.log('bad startDt') ;
            return ;
        }
        if( stopDt===null || stopDt === "" ){
            console.log('bad stopDt') ;
            return ;
        }

        const date0 = new Date(startDt);
        const date1 = new Date(stopDt) ;

        const startdtvalue=
        (date0.getFullYear()*10000+(date0.getMonth() + 1)*100+date0.getDate()).toString()
        + "000000" ;
        const stopdtvalue = 
        (date1.getFullYear()*10000+(date1.getMonth() + 1)*100+date1.getDate()).toString()
        + "000000" ;

        //roiObject can be sys-roi , user-roi , temp-roi , null
        let roiId = "" ;
        let roiGeojson = "" ;
        if( roiObject==null ){}
        else if( roiObject.rid===0 ){
            //temp-roi
            roiGeojson = roiObject.geojson ;
        }else if( roiObject.uid===0 ){
            //sys-roi
            roiId="sys:"+roiObject.rid ;
        }else{
            //user-roi
            roiId="user:"+roiObject.rid ;
        }
        if( validMin === '' ){
            return ;
        }
        if( validMax===''){
            return ;
        }
        if( fillData===''){
            return ;
        }
        props.onOk(props.lyrParams.name,
            startdtvalue,
            stopdtvalue,
            roiId ,
            roiGeojson ,
            validMin,
            validMax,
            fillData,
            compositeMethod
            ) ;
    }

    const onStartDateChange = function(date1) {
        setStartDt(date1) ;
    }

    const onStopDateChange = function(date1) {
        setStopDt(date1) ;
    }

    //onCurrentROI Click
    const onCurrentROIClick = function () {
        setRoiObject( props.appCurrentROI ) ;
    }
    
    
    //onClearROI click
    const onClearROIClick = function(){
        setRoiObject(null) ;
    }

    const renderContent = function () 
    {
        return (
            <div style={{margin:'auto',marginTop:'8px'}}>
				<Form style={{textAlign:'center'}}>
                    <Table style={{margin:'auto'}} >
                        <tbody>
                            <tr>
                                <td>
                                    数据名称:
                                </td>
                                <td>
                                    <Form.Control placeholder='' type="text" 
                                        style={{width:'240px'}} 
                                        disabled size='sm'
                                        value={(props.lyrParams!==null)?(props.lyrParams.productDisplay.productname):""}
                                         />
                                </td>
                            </tr>

                            <tr>
                                <td>
                                    合成方法:
                                </td>
                                <td style={{textAlign:"left"}}>
                                    <select 
                                    style={{width:'240px'}}
                                    value={compositeMethod}
                                    onChange={(e)=>setCompositeMethod(e.target.value)}
                                    >
                                        {
                                            optionsCompositeMethod.map( item=> <option key={item.key} value={item.value}>{item.text}</option>)
                                        }
                                    </select>
                                </td>
                            </tr>

                            <tr>
                                <td>开始日期:</td>
                                <td style={{textAlign:"left"}}>
                                    <DatePicker 
                                        locale="zh-Cn"
                                        name="startDt"
                                        selected={startDt}
                                        onChange={onStartDateChange}
                                        dateFormat="yyyy-MM-dd"
                                        showMonthDropdown
                                        showYearDropdown
                                        dropdownMode="select"
                                        />
                                </td>
                            </tr>
                            <tr>
                                <td>结束日期:</td>
                                <td style={{textAlign:"left"}}>
                                    <DatePicker 
                                        locale="zh-Cn"
                                        name="stopDt"
                                        selected={stopDt}
                                        onChange={onStopDateChange}
                                        dateFormat="yyyy-MM-dd"
                                        showMonthDropdown
                                        showYearDropdown
                                        dropdownMode="select"
                                        />
                                </td>
                            </tr>

                            <tr>
                                <td>
                                    感兴趣区(可选):
                                </td>
                                <td>
                                    <Form.Control placeholder='感兴趣区名称' 
                                        type="text" 
                                        style={{width:'240px'}} 
                                        disabled size='sm' 
                                        value={(roiObject!==null)?roiObject.name:""}
                                    />
                                </td>
                            </tr>


                            <tr>
                                <td>
                                    
                                </td>
                                <td>
                                    <Button style={{marginRight:'8px'}} size='sm' variant="success" onClick={onCurrentROIClick}>当前ROI</Button>
                                    <Button style={{marginRight:'8px'}} size='sm' variant="secondary"  onClick={props.onSelectROIClick}>选择ROI</Button>
                                    <Button size='sm' variant="warning" onClick={onClearROIClick}>清除ROI</Button>
                                </td>
                            </tr>


                            <tr>
                                <td>
                                    合成数据下限:
                                </td>
                                <td>
                                <Form.Control placeholder='' type="number" style={{width:'240px'}} 
                                    size='sm' 
                                    value={validMin} 
                                    onChange={(e)=>setValidMin(e.target.value)} />
                                </td>
                            </tr>


                            <tr>
                                <td>
                                    合成数据上限:
                                </td>
                                <td>
                                    <Form.Control placeholder='' type="number" style={{width:'240px'}} 
                                        size='sm' value={validMax} 
                                        onChange={(e)=>setValidMax(e.target.value)} />
                                </td>
                            </tr>


                            <tr>
                                <td>
                                    填充值:
                                </td>
                                <td>
                                    <Form.Control placeholder='' type="number" 
                                        style={{width:'240px'}} size='sm' 
                                        value={fillData} 
                                        onChange={(e)=>setFillData(e.target.value)} />
                                </td>
                            </tr>
                        </tbody>
                    </Table>

				</Form>
            </div>
        )
    }






    return (
        <DialogSimple 
        isOpen={props.isOpen} 
        onCancel={onCancel} 
        dialogTitle={"数据合成"} 
        onOk={onOk} 
        renderContent={renderContent} />
    )
}

export default DialogSimpleComposite